<template>
  <div class="homework-grade">
    <h2>作业评分：{{ submission.title }}</h2>
    <div class="submission-details">
      <p>学生：{{ submission.studentId }}</p>
      <p>提交时间：{{ formatDate(submission.submissionDate) }}</p>
    </div>

    <div class="submission-content">
      <h3>提交内容</h3>
      <div v-if="submission.submissionType === 'FILE'">
        <a :href="submission.submissionUrl" target="_blank">查看附件</a>
      </div>
      <div v-else>
        <p>{{ submission.submissionText }}</p>
      </div>
    </div>

    <form @submit.prevent="gradeSubmission" class="grade-form">
      <div class="form-group">
        <label>分数 (0-{{ submission.maxScore }})</label>
        <input 
          type="number" 
          v-model.number="grade" 
          :min="0" 
          :max="submission.maxScore" 
          required
        >
      </div>

      <div class="form-group">
        <label>反馈</label>
        <textarea v-model="feedback"></textarea>
      </div>

      <button type="submit" :disabled="loading">
        {{ loading ? '提交中...' : '提交评分' }}
      </button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { homeworkService } from '@/services/homework.service'
import { useRouter } from 'vue-router'

const props = defineProps({
  submission: {
    type: Object,
    required: true
  }
})

const router = useRouter()
const grade = ref(0)
const feedback = ref('')
const loading = ref(false)

const formatDate = (date: Date) => {
  return new Date(date).toLocaleString()
}

const gradeSubmission = async () => {
  try {
    loading.value = true
    await homeworkService.gradeHomework(props.submission.id, {
      grade: grade.value,
      feedback: feedback.value
    })
    router.push(`/courses/${props.submission.courseId}/homeworks`)
  } catch (error) {
    console.error('作业评分失败', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.homework-grade {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.submission-details {
  background-color: #f4f4f4;
  padding: 10px;
  margin-bottom: 20px;
}

.submission-content {
  margin-bottom: 20px;
}

.grade-form .form-group {
  margin-bottom: 15px;
}

.grade-form label {
  display: block;
  margin-bottom: 5px;
}

.grade-form input, 
.grade-form textarea {
  width: 100%;
  padding: 8px;
}

.grade-form button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
}
</style>